$home-fast-list-color: #37383a;
$home-fast-list-bg: #fff;
$home-fast-list-shadow:rgba(0,0,0,.18);
$home-fast-list-active: #de2728;
$home-fast-list-duration: 300ms;
$home-fast-list-timing-function: linear;
.home-fast-list-box{
    width: 100%;
    .home-fast-list__label{
        padding: .2rem .26rem;
        font-size: .16rem;
        color: $home-fast-list-color;
    }
    .home-fast-list__info{
        padding: .1rem .16rem;
        width: 100%;
        .home-fast-list__info-box{
            width: 100%;
            position: relative;
            overflow: hidden;
        }
    }
    .home-fast-list__ul{
        transform: translate(-.64rem,-.24rem);
        width: 100%;
        &::after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
        }
        .home-fast-list__li{
            float: left;
            width: 1.5rem;
            margin: .3rem .64rem 0;
        }
        ::v-deep{
            .home-fast-list__body{
                width: 1.3rem;
                height: 1.3rem;
                margin: 0 auto;
                background-color: $home-fast-list-bg;
                border-radius: .08rem;
                box-shadow: 0 6px 7px $home-fast-list-shadow;
                @include flexLayout(flex,center,center);
                flex-flow: column;
                overflow: hidden;
                cursor: pointer;
                position: relative;
                &::after{
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-bottom: .2rem solid transparent;
                    border-right: .2rem solid $home-fast-list-active;
                    border-left: .2rem solid transparent;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 2;
                    transform: translate(100%,-100%);
                    transition-property: transform;
                    transition-duration: $home-fast-list-duration;
                    transition-timing-function: $home-fast-list-timing-function;
                }
                &:hover{
                    &::after{
                        transform: translate(0,0);
                    }
                }
            }
            .home-fast-list__cover{
                width: 100%;
                text-align: center;
                flex: 0 0 auto;
                .icon-svg{
                    font-size: .5rem;
                }
            }
            .home-fast-list__info{
                width: 100%;
                text-align: center;
                flex: 0 0 auto;
                padding-top: .05rem;
            }
            .home-fast-list__text{
                font-size: .16rem;
                color: $home-fast-list-color;
            }
        }
    }
}
